<template>
	<view>
		<view class="payBottom" :style="{width:width +1+ 'px'}">
			<view class="sumPirce">
				总价:&nbsp;{{this.sumPirce}}￥
			</view>
			<button type="default" size="mini" class="payBottom_button" @click="goToPay">支付订单			</button>
			
		</view>
		<u-popup :show="show" @close="close" mode="center" :round="10">
		    <view style="width: 500rpx;height: 500rpx;display: flex;justify-content: center;align-items: center;">
		        <image :src="payUrl" style="width: 90%;height: 90%;"></image>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: "PayButton",
		data() {
			return {
				width: uni.getSystemInfoSync().screenWidth,
				payUrl: '',
				show:false
				
			};
		},
		computed: {
			...mapGetters('indexStore', ['sumPirce']),
			...mapState('indexStore', ['addressId'])
		},
		methods: {
			...mapActions('indexStore', ['getSumbitOrder']),
			async goToPay() {
				const result = await this.getSumbitOrder()
				if (result) {
					this.payUrl = result
					this.show = true
				}
			},
			close(){
				this.show = false
				uni.navigateTo({
					url:'../../pagesLogin/oederList/oederList'
				})
			}
		},
	}
</script>

<style lang="scss">
	.payBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 130rpx;
		display: flex;
		background-color: #57E3A8;
		justify-content: space-between;
		padding-left: 50rpx;
		align-items: center;

		.sumPirce {
			color: black;
			font-weight: 700;
		}

		.payBottom_button {
			width: 50%;
			height: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			background-color: black;
			color: #57E3A8;
			font-weight: 700;
			font-size: 35rpx;
		}
	}
</style>
